<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item prop="" label="">
          <GradeSelect v-model="searchForm.grade" />
        </el-form-item>
        <el-form-item>
          <ClassSelect v-model="searchForm.class" />
        </el-form-item>
        <el-form-item prop="" label="">
          <el-input v-model="searchForm.search" placeholder="按学生姓名搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">筛选</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table v-loading="table.loading" :data="table.data" border>
        <el-table-column prop="user_id" label="学生ID" />
        <el-table-column prop="user_info.name" label="姓名/昵称" />
        <el-table-column prop="user_info.grade.grade_name" label="年级" />
        <el-table-column prop="user_info.class_name" label="班级" />
        <el-table-column prop="majoring" label="1 号方案" align="center">
          <template slot-scope="t">
            {{ renderPlan(t.row, 0) }}
          </template>
        </el-table-column>
        <el-table-column prop="majoring" label="2 号方案" align="center">
          <template slot-scope="t">
            {{ renderPlan(t.row, 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="majoring" label="3 号方案" align="center">
          <template slot-scope="t">
            {{ renderPlan(t.row, 2) }}
          </template>
        </el-table-column>
        <el-table-column label="完成时间" align="center">
          <template slot-scope="s">
            <span>{{ s.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="s">
            <el-button
              type="primary"
              @click="go(s)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <WrapPagination>
      <div>
        <el-pagination
          class="pagination"
          :current-page="table.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </WrapPagination>
  </div>
</template>

<script>
import { TableMixin } from '../../components/mixin'
import GradeSelect from './components/grade-select'
import ClassSelect from './components/class-select'
import { getXkCompositeDetails } from '../../api/statistics'
export default {
  name: 'CareerComplex',
  components: {
    GradeSelect: GradeSelect,
    ClassSelect: ClassSelect
  },
  mixins: [TableMixin],
  data() {
    return {
      searchForm: {
        grade: '',
        search: '',
        status: '',
        class: ''
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    renderPlan(row, index) {
      const plan = JSON.parse(row.scheme)[index]
      return plan ? plan.join('+') : '----'
    },
    go(s) {
      this.$router.push({
        name: 'statistics-course-best-detail',
        params: {
          id: s.row.id
        }
      })
    },
    getList() {
      return this.wrapList(getXkCompositeDetails, {
        search: this.searchForm.search,
        grade_id: this.searchForm.grade,
        class_name: this.searchForm.class
      })
    }
  }
}
</script>

<style scoped>

</style>
